<script setup lang="ts">
import { models } from '../../../../enums/Mode'
import { getHouseMedia } from "../../../../api/houseMedia";
import { HttpStatusCode } from "axios"
import { delHouseRes } from '../../../../api/houseRes'
import { ElMessage, ElMessageBox } from "element-plus";

const emits = defineEmits(['increase', 'preview'])
const props = defineProps<{
  dataList: ListHouseRes[],
  loading: boolean
}>()

const previewMedia = async (id: string) => {
  console.log(id)
  const res = await getHouseMedia(id)
  if(res.statusCode === HttpStatusCode.Ok) {
    emits('preview', res.data)
  }
}

const openDelConfirm = (id: string, house_plot: string) => {
  ElMessageBox.confirm(
      '您确定要删除此记录吗?',
      '删除房源',
      {
        confirmButtonText: '确认删除',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    delService(id, house_plot)
  })
}
const delService = async (id: string, house_plot: string) => {
  let res: Result<string> = await delHouseRes(id, house_plot)
  if(res.statusCode === HttpStatusCode.Created || res.statusCode === HttpStatusCode.Ok) {
    ElMessage({
      message: res.data as string,
      type: 'success'
    })
    emits('increase', 1, '')
  } else {
    ElMessage({
      message: '删除失败',
      type: 'error'
    })
  }
}
</script>

<template>
  <el-table
      border
      stripe
      v-model:data="props.dataList"
      table-layout="auto"
      v-loading="loading"
      style="width: 100%"
      height="500px">
    <el-table-column
        label="具体地址"
        align="center"
        width="220"
    >
      <template #default="scope">
        {{ scope.row.house_plot + scope.row.spec_address.split('-')[0] + '栋' + scope.row.spec_address.split('-')[1] + '室' }}
      </template>
    </el-table-column>
    <el-table-column
        prop="house_rent"
        label="租金(月)"
        align="center"
        width="100"
    />
    <el-table-column
        label="付款方式"
        align="center"
        width="100"
    >
      <template #default="scope">
        {{ '押' + scope.row.pay_method.split('-')[0] + '付' + scope.row.pay_method.split('-')[1] }}
      </template>
    </el-table-column>
    <el-table-column
        prop="house_use"
        label="类型"
        align="center"
        width="90"
    />
    <el-table-column
        label="户型"
        align="center"
        width="130"
    >
      <template #default="scope">
        {{ scope.row.house_type.split('-')[0] + '房' + scope.row.house_type.split('-')[1] + '厅' + scope.row.house_type.split('-')[2] + '卫' }}
      </template>
    </el-table-column>
    <el-table-column
        prop="house_area"
        label="面积"
        align="center"
        width="90"
    />
    <el-table-column
        label="出租方式"
        align="center"
        width="90"
    >
      <template #default="scope">
        {{ models.find(item => item.value === scope.row.house_mode)?.label }}
      </template>
    </el-table-column>
    <el-table-column
        prop="house_peace"
        label="区域"
        align="center"
        width="90"
    />
    <el-table-column
        prop="house_address"
        label="房源地址"
        align="center"
    />
    <el-table-column
        prop="landload_phone"
        label="房东电话"
        align="center"
        width="200"
    />
    <el-table-column
        label="状态"
        align="center"
        width="90"
    >
      <template #default="scope">
        <el-tag :type="scope.row.house_status ? 'success' : 'info'">{{scope.row.house_status ? '未租' : '已租'}}</el-tag>
      </template>
    </el-table-column>
    <el-table-column
        label="创建时间"
        align="center"
        width="180"
    >
      <template #default="scope">
        {{new Date(scope.row.createdAt).toLocaleString('zh')}}
      </template>
    </el-table-column>
    <el-table-column
        prop="description"
        label="操作"
        align="center"
        fixed="right"
        width="200"
    >
      <template #default="scope">
        <span style="font-size: 14px;color: #6e6efd;cursor:pointer;" @click="previewMedia(scope.row.id)">查看房源图片/视频</span>
        <span style="font-size: 14px;color: red;cursor:pointer;margin-left: 20px;" @click="openDelConfirm(scope.row.id, scope.row.house_plot)">删除</span>
      </template>
    </el-table-column>
  </el-table>
</template>

<style lang="less" scoped>

</style>